{% extends "base.html" %}

{% block title %}推文详情 - Twitter(X) AI 监控系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('index') }}">首页</a></li>
                <li class="breadcrumb-item active">推文详情</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-person-circle me-2 fs-4"></i>
                        <div>
                            <h5 class="mb-0">{{ tweet.author }}</h5>
                            <small class="text-muted">
                                {% if tweet.formatted_created_at %}
                                    <i class="bi bi-clock"></i> 发帖时间: {{ tweet.formatted_created_at }}
                                {% elif tweet.created_at %}
                                    <i class="bi bi-clock"></i> 发帖时间: {{ tweet.created_at }}
                                {% endif %}
                            </small>
                        </div>
                    </div>
                    <a href="{{ tweet.tweet_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-box-arrow-up-right"></i> 查看原文
                    </a>
                </div>
            </div>
            <div class="card-body">
                <!-- AI生成的标题 -->
                <div class="mb-4">
                    <h4 class="text-primary">
                        <i class="bi bi-lightbulb-fill"></i> {{ tweet.ai_title }}
                    </h4>
                </div>

                <!-- AI翻译 -->
                <div class="mb-4">
                    <h5 class="border-bottom pb-2">
                        <i class="bi bi-translate"></i> AI翻译
                    </h5>
                    <div class="content-box p-3 rounded">
                        <p class="mb-0">{{ tweet.ai_translation }}</p>
                    </div>
                </div>

                <!-- AI解读 -->
                <div class="mb-4">
                    <h5 class="border-bottom pb-2">
                        <i class="bi bi-chat-text"></i> AI解读
                    </h5>
                    <div class="content-box p-3 rounded">
                        <p class="mb-0" style="white-space: pre-line;">{{ tweet.ai_analysis }}</p>
                    </div>
                </div>

                <!-- 原文 -->
                <div class="mb-4">
                    <h5 class="border-bottom pb-2">
                        <i class="bi bi-file-text"></i> 原文
                    </h5>
                    <div class="content-box p-3 rounded">
                        <p class="mb-0" style="white-space: pre-line;">{{ tweet.original_text }}</p>
                    </div>
                </div>

                <!-- 处理信息 -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card info-card">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="bi bi-info-circle"></i> 处理信息
                                </h6>
                                <ul class="list-unstyled mb-0">
                                    <li><strong>推文ID:</strong> {{ tweet.id }}</li>
                                    <li><strong>发帖时间:</strong> 
                                        {% if tweet.formatted_created_at %}
                                            {{ tweet.formatted_created_at }}
                                        {% elif tweet.created_at %}
                                            {{ tweet.created_at }}
                                        {% endif %}
                                    </li>
                                    <li><strong>处理时间:</strong> 
                                        {% if tweet.beijing_time %}
                                            {{ tweet.beijing_time }}
                                        {% elif tweet.timestamp %}
                                            {{ tweet.timestamp[:19].replace('T', ' ') }}
                                        {% endif %}
                                    </li>
                                    <li><strong>处理日期:</strong> {{ tweet.processed_date }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card info-card">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="bi bi-link-45deg"></i> 相关链接
                                </h6>
                                <div class="d-grid gap-2">
                                    <a href="{{ tweet.tweet_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-twitter"></i> 查看原推文
                                    </a>
                                    <a href="{{ url_for('index', author=tweet.author) }}" class="btn btn-outline-secondary btn-sm">
                                        <i class="bi bi-person"></i> 查看该作者的其他推文
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 返回按钮 -->
<div class="row mt-3">
    <div class="col-12">
        <a href="{{ url_for('index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> 返回首页
        </a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 复制功能
function copyToClipboard(text, button) {
    navigator.clipboard.writeText(text).then(function() {
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="bi bi-check"></i> 已复制';
        button.classList.replace('btn-outline-secondary', 'btn-success');
        
        setTimeout(function() {
            button.innerHTML = originalText;
            button.classList.replace('btn-success', 'btn-outline-secondary');
        }, 2000);
    });
}

// 添加复制按钮到各个文本区域
document.addEventListener('DOMContentLoaded', function() {
    const textAreas = document.querySelectorAll('.content-box');
    textAreas.forEach(function(area, index) {
        const copyBtn = document.createElement('button');
        copyBtn.className = 'btn btn-outline-secondary btn-sm float-end mb-2';
        copyBtn.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
        copyBtn.onclick = function() {
            copyToClipboard(area.querySelector('p').textContent, this);
        };
        area.insertBefore(copyBtn, area.firstChild);
    });
});
</script>
{% endblock %} 